<template>
    <div class="courselist_page">
        <app-header @getCourseByCourseName="getCourseByCourseName"></app-header>
        <div>
            <!--背景色设置-->
            <div class="teacher_bg">
            </div>
            <!--讲师信息展示-->
            <div class="teacher_bg2">
                <div class="zhognx">
                    <div class="login_Avatar" style="float: left">
                        <img :src="teacherDate.avatar">
                    </div>
                    <div class="fl teacher_info" style="float: left">
                        <p class="font_18 font_b c_fff">{{teacherDate.name}}</p>
                        <div class="mgt20 font_14 c_999" style="margin-top: 20px" v-html="teacherDate.intro">
                        </div>
                    </div>
                </div>
            </div>
        <!--下面课程信息展示-->

        <div class="course_content">
            <div class="big_text" style="width: 1200px;margin: 0 auto;height: 60px;line-height: 60px;font-size: 18px;">
                <span class="small_text">该讲师共有{{pageObj.totalCount}}个课程</span>

            </div>

            <ul class="clearfix">
                <li v-for="(item, index) in pageObj.list" :key="index">
                    <div class="course_info">
                        <div class="img_box">
                            <router-link :to="{name: 'DetailId', params: {id: item.id}}">
                                <img  class="course_img" :src="item.cover" alt="" >
                            </router-link>
                        </div>
                        <p>{{item.title}}</p>
                        <p class="font_12 c_999 mgl10">
                            课程点击{{item.viewCount}}次
                        </p>
                        <span class="price_box" v-if="item.price == 0">免费</span>
                        <span class="price_box" v-else>￥{{item.price}}</span>
                    </div>
                </li>
            </ul>
            <d-page v-if="pageObj.totalPage > 1" :page="pageObj" @btnClick="getPage"></d-page>
        </div>
        <RightTap :weiVisable="weiVisable" ></RightTap>
    </div>
        <app-footer></app-footer>
    </div>
</template>

<script>
    import DPage from '@/components/Page'
    import HeaderList from "@/components/HeaderList";
    import RightTap from "@/components/RightTap";
    import AppHeader from "@/components/common/header";
    import AppFooter from "@/components/common/footer";
    export default {
        name: "TeacherXinX",
        components: {
            HeaderList,
            RightTap,
            AppFooter,
            AppHeader,
            DPage,
        },
        data () {
            return {
                imgUrl:require("/src/assets/img/3.jpg"),
                weiVisable:true,
                openVip: false,
                free: '',
                teacherId:this.$route.query.teacherId,
                courseName:'',
                teacherDate:{},
                //课程信息
                pageObj : {
                    //当前页面--》page
                    pageCurrent: '1',
                    //每页条数--》limit
                    pageSize: '8',
                    //总条数
                    totalCount: '',
                    //total的页数（有几页）【totalCount/pageSize】
                    totalPage: '',
                    list: {},
                }

            }
        },
        created() {
            this.inintTeacherByTeacherId()
            this.inintCourse()
            if (this.$route.query.courseName){
                this.courseName=this.$route.query.courseName;
            }
        },
        methods:{
            getCourseByCourseName(courseName,teacherId){
                this.courseName=courseName;
                this.teacherId=teacherId;
                this.inintCourse();
            },

            //获取讲师课程信息
            inintCourse(){
                var that = this
                this.$http.post(`/core/course/findCourseByTeacherId/${this.pageObj.pageCurrent}/${this.pageObj.pageSize}`,{"teacherId":this.teacherId,"courseName":this.courseName}).then(function (resp) {
                    that.pageObj.list = resp.data.records;
                  console.log(resp.data.total)
                    if (resp.data.records.length>0){
                        that.pageObj.totalCount = resp.data.total;
                    }else {
                        that.pageObj.totalCount=0;
                    }
                    that.pageObj.totalPage=Math.ceil(that.pageObj.totalCount/8)
                })
            },

            //获取讲师课程信息
            inintTeacherByTeacherId(){
                var that = this
                this.$http.post(`/core/teacher/queryAllTeacherById/${this.teacherId}`).then(function (resp) {
                    that.teacherDate=resp.data;
                })
            },

            //监听分页的触发
            getPage: function (int) {
                this.pageObj.pageCurrent=int;
                this.inintCourse();
            },
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .courselist_page {
        .course_content {
            background: rgb(245, 245, 245);
            padding: 30px 0 10px 0;
        ul {
            width: 1200px;
            margin: 0 auto;
        }
        li {
            float: left;
            border-radius: 6px;
            background: #fff;
            margin: 0px 20px 20px 0px;
        &:nth-child(4n) {
             margin-right: 0px;
         }
        }
        }
        .course_info {
            display: block;
            width: 285px;
            height: 240px;
            border-radius: 6px;
            position: relative;
        &:hover {
             text-decoration: none;
             color: #000;
             box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.2);
             transform: translateY(-2px);
             transition: all .3s;
         }
        .img_box {
            position: relative;
            width: 285px;
            height: 140px;
        .course_img {
            width: 285px;
            height: 140px;
            border-radius: 6px 6px 0 0;
        }
        }
        p {
            font-size: 16px;
            margin-top: 5px;
            padding: 0 10px;
            word-break: break-all;
        }
        .price_box {
            font-size: 16px;
            position: absolute;
            bottom: 15px;
            left: 10px;
            color: red;
        }
        .font_12 {
            font-size: 12px;
        }
        .c_999 {
            color: #999;
        }

        }
    }
    .teacher_bg{
        width: 100%;
        height: 100px;
        background-image: url("../../../assets/img/jiangshi.jpg");
        /*background: no-repeat 50%;*/
        /*background-color: #1E1E1E;*/
    }
    .teacher_bg2{
        width: 100%;
        height: 100px;
    }
    .zhognx{
        width: 1200px;
        height: 100px;
        margin: auto;
    }
    .login_Avatar{
        width: 88px;
        height: 88px;
        border-radius: 44px;
        overflow: hidden;
        border: 3px solid #fff;
        margin-top: -50px;
        position: relative;
    }
    .login_Avatar > img{
        max-width: 100%;
        width: 90px;
        height: 90px;
        border: none;
    }
    .teacher_info {
        width: 1060px;
        margin: -30px 0 0 20px;
        line-height: 20px;
    }
    .c_fff {
        color: #fff;
    }
    .font_18 {
        font-size: 18px;
    }
    .c_999 {
        color: #999;
    }

    .font_14 {
        font-size: 14px;
    }
    .mgt20 {
        margin-top: 20px;
    }

</style>